import React, { FC, ReactNode, useMemo } from 'react';
import { Text, View } from '@ray-js/ray';
import { DpStateKey } from '@/redux/modules/dpStateSlice';
import Strings from '@/i18n';
import { getDpSchema } from '@/utils';

import styles from './index.module.less';
import Bool from './Bool';
import Value from './Value';
import Enum from './Enum';

type Props = {
  dpCode?: DpStateKey;
  title?: string;
  customFeature?: ReactNode;
};

const SettingItem: FC<Props> = ({ dpCode, title, customFeature }) => {
  const { type } = useMemo(() => getDpSchema(dpCode), []);

  return (
    <View className={styles.container}>
      <Text className={styles.title}>{title ?? Strings.getDpLang(dpCode)}</Text>
      {customFeature}
      {type === 'bool' && <Bool dpCode={dpCode} />}
      {type === 'value' && <Value dpCode={dpCode} />}
      {type === 'enum' && <Enum dpCode={dpCode} />}
    </View>
  );
};

export default SettingItem;
